<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<div class="factory-information"
     ng-if="factoryInformationController.copyOriginFactory">
  <!-- Name -->
  <che-label-container che-label-name="Name">
    <div layout="column" class="factory-information-input">
      <ng-form name="factoryInformationController.factoryInformationForm">
        <che-input che-form="factoryInformationForm"
                   che-name="factoryName"
                   che-place-holder="Name of the factory"
                   aria-label="Name of the factory"
                   ng-model="factoryInformationController.copyOriginFactory.name"
                   ng-change="factoryInformationController.updateFactoryName($value)"
                   ng-model-options="{ allowInvalid: true }"
                   ng-trim
                   ng-minlength="3"
                   ng-maxlength="20"
                   ng-pattern="/^[ A-Za-z0-9_\-\.]+$/"
                   unique-factory-name="factoryInformationController.origName">
          <div ng-message="required">A name is required.</div>
          <div ng-message="pattern">Factory name may contain digits, latin letters, spaces, _ , . , - and should start
            only
            with digits, latin letters or underscores
          </div>
          <div ng-message="minlength">The name has to be more than 3 characters long.</div>
          <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
          <div ng-message="uniqueFactoryName">This factory name is already used.</div>
        </che-input>
      </ng-form>
    </div>
  </che-label-container>

  <!-- URL -->
  <che-label-container che-label-name="URL">
    <che-text-info ng-show="factoryInformationController.getFactoryNamedUrl()"
                   che-text="factoryInformationController.getFactoryNamedUrl()"
                   che-href="factoryInformationController.getFactoryNamedUrl()"
                   che-copy-clipboard="true"
                   class="factory-information-panel-item"></che-text-info>
    <che-text-info che-text="factoryInformationController.getFactoryIdUrl()"
                   che-href="factoryInformationController.getFactoryIdUrl()"
                   che-copy-clipboard="true"
                   class="factory-information-panel-item"></che-text-info>
  </che-label-container>

  <!-- Creation Date -->
  <che-label-container che-label-name="Creation Date">
    <che-text-info
            che-text="factoryInformationController.factory.creator.created | amDateFormat:'Do MMMM YYYY'">
    </che-text-info>
  </che-label-container>

  <!--Stack-->
  <che-label-container che-label-name="Configure Stack"
                       che-label-description="Stacks are recipes or images used to define your environment runtime. Workspace environments are used to build and run your project.">
    <md-radio-group ng-model="factoryInformationController.stackRecipeMode">
      <md-radio-button value="current-recipe">Use current recipe</md-radio-button>
      <div ng-if="factoryInformationController.stackRecipeMode === 'current-recipe'">
        <div ng-if="factoryInformationController.getRecipe()">
          {{factoryInformationController.getRecipe()}}
        </div>
        <div ng-if="!factoryInformationController.getRecipe()">
          none
        </div>
      </div>
      <md-radio-button value="from-stack">Configure recipe from a stack</md-radio-button>
    </md-radio-group>
    <div ng-if="factoryInformationController.stackRecipeMode === 'from-stack'">
      <ng-form name="factoryInformationController.factoryInformationForm">
        <workspace-select-stack workspace-stack-on-change="factoryInformationController.onWorkspaceStackChanged(config, stackId)"
                                workspace-name="factoryInformationController.workspaceName"
                                environment-name="factoryInformationController.environmentName"
                                workspace-imported-recipe="factoryInformationController.workspaceImportedRecipe"></workspace-select-stack>
        <che-button-primary che-button-title="Save" class="save-stack-button"
                            ng-click="factoryInformationController.saveStack()"></che-button-primary>
      </ng-form>
    </div>
  </che-label-container>

  <che-label-container che-label-name="Workspace"
                       che-label-description="A workspace contains projects and runtime environments.">

    <!--Workspace name-->
    <che-label-container che-label-name="Name">
      <ng-form name="factoryInformationController.factoryInformationForm">
        <div class="factory-information-input">
          <che-input che-form="factoryInformationForm"
                     che-name="workspaceName"
                     che-place-holder="Name of the workspace"
                     aria-label="Name of the workspace"
                     ng-model="factoryInformationController.copyOriginFactory.workspace.name"
                     ng-change="factoryInformationController.updateWorkspaceName($value)"
                     ng-model-options="{ allowInvalid: true }"
                     required
                     ng-minlength="3"
                     ng-maxlength="20"
                     ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
            <div ng-message="required">A name is required.</div>
            <div ng-message="pattern">Workspace name may contain digits, latin letters, _ , . , - and should start
              only with digits, latin
              letters or underscores
            </div>
            <div ng-message="minlength">The name has to be more than 3 characters long.</div>
            <div ng-message="maxlength">The name has to be less than 20 characters long.</div>
          </che-input>
        </div>
      </ng-form>
    </che-label-container>

    <!--Workspace RAM-->
    <che-label-container che-label-name="RAM" ng-if="factoryInformationController.copyOriginFactory.workspace.defaultEnv">
      <ng-form name="factoryInformationController.factoryInformationForm">
        <div data-ng-repeat="(environmentKey, environmentValue) in factoryInformationController.copyOriginFactory.workspace.environments">
          <span ng-if="factoryInformationController.getObjectKeys(factoryInformationController.copyOriginFactory.workspace.environments).length > 1"
                class="workspace-environment-name">ENVIRONMENT: {{environmentKey}}</span>

          <div>
            <div data-ng-repeat="(machineKey, machineValue) in environmentValue.machines">
              <div class="workspace-machine" ng-if="machineValue.attributes && machineValue.attributes.memoryLimitBytes">
                <span ng-if="factoryInformationController.getObjectKeys(environmentValue.machines).length > 1">MACHINE: {{machineKey}}</span>
                <che-workspace-ram-allocation-slider
                        ng-model="machineValue.attributes.memoryLimitBytes"
                        che-on-change="factoryInformationController.updateFactory()"></che-workspace-ram-allocation-slider>
              </div>
            </div>
          </div>
        </div>
      </ng-form>
    </che-label-container>
  </che-label-container>

  <!-- Configure commands -->
  <che-label-container che-label-name="Configure Commands"
                       che-label-description="Commands are processes that are invoked by users from a dropdown in the IDE.">
    <cdvy-factory-command cdvy-factory-object="factoryInformationController.copyOriginFactory"
                          cdvy-on-change="factoryInformationController.updateFactory()"></cdvy-factory-command>
  </che-label-container>

  <!-- Configure actions -->
  <che-label-container che-label-name="Configure Actions"
                       che-label-description="Tell the IDE to perform additional actions after the workspace is loaded.">
    <!-- almost no action is possible at this lifecycle
    <cdvy-factory-action-box cdvy-lifecycle="onAppLoaded"
                             cdvy-action-title="Actions executed after IDE is loaded"
                             cdvy-callback-controller="factoryInformationController"
                             cdvy-factory-object="factoryInformationController.factoryObject"></cdvy-factory-action-box>
    -->
    <cdvy-factory-action-box cdvy-lifecycle="onProjectsLoaded"
                             cdvy-callback-controller="factoryInformationController"
                             cdvy-factory-object="factoryInformationController.copyOriginFactory"
                             cdvy-on-change="factoryInformationController.updateFactory()"></cdvy-factory-action-box>
  </che-label-container>

  <!-- Configuration -->
  <che-label-container che-label-name="Configuration"
                       che-label-description="JSON definition of the factory."
                       ng-class="{ 'disabled-state': !factoryInformationController.factoryContent }">
    <div class="factory-configuration-panel">
      <md-content layout="column" layout-fill>
        <div class="json-editor" ng-if="factoryInformationController.factoryContent !== null">
          <textarea ui-codemirror="factoryInformationController.editorOptions"
                    ng-model="factoryInformationController.factoryContent"
                    aria-label="Factory configuration editor"
                    ng-change="factoryInformationController.factoryEditorOnChange()"></textarea>
        </div>
      </md-content>
      <div layout="row" flex>
        <div>
          <a ng-href="{{factoryInformationController.factoryDocs}}" target="_blank">Factory configuration docs</a>
        </div>
        <div layout="row" layout-align="end start" flex>
          <div>
            <che-button-default che-button-title="Reload"
                                ng-click="factoryInformationController.factoryEditorReset()"></che-button-default>
          </div>
          <div class="factory-information-update-button">
            <che-button-primary che-button-title="Update"
                                ng-disabled="factoryInformationController.factoryContent === factoryInformationController.$filter('json')(factoryInformationController.copyOriginFactory, 2);"
                                ng-click="factoryInformationController.updateFactoryContent()"></che-button-primary>
          </div>
        </div>
      </div>
    </div>
  </che-label-container>

  <!-- Delete button -->
  <che-label-container class="factory-delete-label"
                       che-label-name="Delete Factory"
                       che-label-description="This is irreversible.">
    <che-button-danger che-button-title="Delete"
                       ng-click="factoryInformationController.deleteFactory()"></che-button-danger>
  </che-label-container>

</div>
